<template>
    <div class="count"  v-loading="loading">
      <div class="typeOne" v-if="info.vote_type==1">
        <section class="head">
           <div class="title">
            {{info.vote_title}}
          </div>
          <img style="margin:1rem 0;width:60%;" :src="info.file_path" alt="" srcset="">
          <div class="title-head">
            {{info.vote_desc}}
          </div>
          <div class="date">
            {{info.create_time}}
          </div>
        </section>
        <section class="table">
           <div v-for="item in info.voteOptions" :key="item.id">
              <div class="list">
               <img :src="item.file_path" alt="">
               <p>{{item.option_desc}}</p>
              </div>
           </div>
        </section>
      </div>
       <div class="typeOne" v-if="info.vote_type==2">
        <section class="head">
           <div class="title">
            {{info.vote_title}}
          </div>
          <img style="margin:1rem 0;width:40%;" :src="info.file_path" alt="" srcset="">
          <div class="title-head">
            {{info.vote_desc}}
          </div>
          <div class="title-head">
           投票规则：{{info.active_rule}}
          </div>
          <div class="date">
            创建时间{{info.create_time}}
          </div>
        </section>
        <section class="table1">
           <div v-for="item in info.voteOptions" :key="item.id">
              <div class="list1">
                <img class="img" :src="item.file_path" alt="">
                <p class="className">{{item.user_name}}</p>
                <div class="name">
                    <p>编号：{{item.id}}</p>
                    <p>得票数：{{item.record_nums}}</p>
                </div>
              </div>
           </div>
        </section>
      </div>
    </div>
</template>
<script>
import { vote_findById } from "@/api/vote";
export default {
    name: 'voteCount',
    data() {
        return {
          info:{},
          loading:false,
        }
    },
    methods: {
       async initList(){
         this.loading = true;
          let query = Object.assign({id:this.$route.query.id},)
          const {data} = await vote_findById(query)
          this.loading =  false;
          if(data.status == 100){
              this.info = data.data
          }
        }
    },
    created() {
        this.initList()
    }
}
</script>
<style lang="scss" scoped>
.typeOne{
  margin: 0.5rem 2rem;
   .head{
       background: #fff;
      padding: 2rem;
      .title{
          font-size: 1.4rem;
        }
        .title-head{
          font-size: 1.2rem;
          margin-top: 0rem;
        }
        .date{
          margin-top: 1rem;
          font-size: 1rem;
          color: #999;
        }
   }
   .table{
     background: #fff;
      margin: 1rem 0rem;
      padding: 2rem 0;
      .list{
        text-align: center;
            img{
              width:30%;
            }
            p{
            font-size: 1.3rem;
            }
      }
   }

}
.name{
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
}
.img{
  height: 150px;
  width: 200px;
  opacity:0.2; filter: alpha(opacity=60);
}
.table1{
  display: flex;
  background: #fff;
   margin: 1rem 0rem;
      padding: 2rem 0;
}
.list1{
  margin-left: 2rem;
  position: relative;
}
.className{
  position: absolute;
  top: 37%;
  left: 42%;
  font-size: 1.6rem;
}
</style>
